<template>
  <span class="staff-name" :style="styleStr()">
      <slot></slot>
  </span>
</template>

<script lang="ts">
  import {
    Vue,
    Prop,
    Component
  } from 'vue-property-decorator';

  function fontColor() {
    return '#FFFFFF'
  }
  function fontWeight() {
    return parseInt(String(Math.random() * 80 + 16))+'px'
  }
  function position(){
    const left = parseInt(String(Math.random() * 100))+'%'
    const top = parseInt(String(Math.random() * 100))+'%'
    return {left,top}
  }

  function fontSize(){
    return parseInt(String(Math.random() * 80 + 16))+'px'
  }


  @Component({
    props: {},
    computed: {


    }
  })
  export default class StaffName extends Vue {

    // @Prop({
    //   type:String,
    //   default:'#FFFFFF'
    // })
    // fontColor

    // @Prop({
    //   type:[Number,String],
    //   default:()=>{
    //     const vals = [400, 500, 600, 700, 800, 900]
    //     const idx = Math.random() * vals.length
    //     return vals[idx]
    //   }
    // })
    // fontWeight
    //
    // @Prop({
    //   type:[Number,String],
    //   default:()=>{
    //     return parseInt(String(Math.random() * 80 + 16))+'px'
    //   }
    // })
    // fontSize
    //
    // @Prop({
    //   type:[String,Object],
    //   default:()=>{
    //     const left = parseInt(String(Math.random() * 100))+'px'
    //     const top = parseInt(String(Math.random() * 100))+'px'
    //     return {left,top}
    //   }
    // })
    // position

    styleStr() {


      return {
        color:fontColor(),
        fontWeight:fontWeight(),
        fontSize:fontSize(),
        ...position()
      }
    }

  };
</script>

<style lang="stylus" scoped>
.staff-name
  position absolute

</style>
